<template>
  <div>
    <el-table
      v-loading="loading"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      @selection-change="selectionFn"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        type="index"
        label="序号"
        width="100"
      />
      <el-table-column
        prop="innerCode"
        label="设备编号"
      />
      <el-table-column
        prop="type[name]"
        label="设备类型"
      />
      <el-table-column
        prop="node[addr]"
        label="详细地址"
      />
      <el-table-column
        prop="ownerName"
        label="合作商"
      />
      <el-table-column
        prop="vmStatus"
        label="设备状态"
      />
      <el-table-column
        prop="zip"
        label="操作"
        width="200"
      >
        <template #default="scope">
          <el-button type="text" size="small" @click="dialogFn(scope.row)">货道路</el-button>
          <el-button type="text" size="small" @click="changeVisibleFn(scope.row)">策略</el-button>
          <el-button type="text" size="small">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottomBox">
      <span v-if="formList.totalCount>10">共{{ formList.totalCount }}条记录  第 {{ formList.pageIndex }}/{{ formList.totalPage }}页</span>
      <el-pagination
        background
        :page-size="formList.pageSize"
        hide-on-single-page
        prev-text="上一页"
        next-text="下一页"
        align="right"
        layout="prev, next"
        :total="formList.totalCount"
        :page-count="tableData.totalPage"
        :current-page="formList.pageIndex"
        @current-change="currentChange"
      />
    </div>
    <WordInfo :row-list="rowList" :form-list="formInline" :is-show="isShow" @closeDialogFn="closeDialog" />
    <DialogStyle>
      <el-dialog
        :visible="changeVisible"
        width="750px"
        title="区域详情"
        @close="closeFn"
        @open="openFn"
      >
        <el-form ref="deptRef" :rules="deptRules" :model="rowInfo" class="Info">
          <el-form-item label="选择策略：" prop="policyId">
            <el-select v-model="rowInfo.policyId" placeholder="请输入" style="width:400px">
              <el-option
                v-for="item in policyTypeList"
                :key="item.policyId"
                :label="item.policyName"
                :value="item.policyId"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button style="margin-right:50px" @click="closeFn">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </DialogStyle>
  </div>
</template>

<script>
import statusInfo from '@/utils/statusInfo'
import addrstyle from '@/utils/addrstyle'
import WordInfo from './WordInfo'
import { vmList, changeBlockApi, policyList } from '@/api'
export default {
  components: {
    WordInfo
  },
  props: {
    formInline: {
      type: Object,
      default: () => {}
    },
    isFromDate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      deptRules: {
        name: [
          { required: true, message: '请输入', trigger: ['blur', 'change'] }
        ]
      },
      changeVisible: false,
      loading: false,
      rowList: {
      },
      tableData: [],
      formList: {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0

      },
      isShow: false,
      rowInfo: {
        policyId: ''
      },
      policyTypeList: []
    }
  },
  watch: {
    isFromDate() {
      this.formList = { ...this.formList, ...this.formInline }
      if (this.isFromDate) {
        this.fetchList()
      }
      this.$emit('nopeSubmit')
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    // 获取渲染页面的数据
    async fetchList() {
      this.loading = true
      const res = await vmList(this.formList)
      console.log(res, '55555555555')
      this.tableData = res.currentPageRecords
      // console.log(this.tableData)
      statusInfo(this.tableData)
      addrstyle(this.tableData)
      this.formListFn(res)
      this.loading = false
    },
    // 订单详情弹窗
    dialogFn(row) {
      this.isShow = true
      this.rowList = row
      // console.log(row)
    },
    // 订单详情的回调
    closeDialog() {
      this.isShow = false
    },
    // 对获取的数据进行类型转换处理
    formListFn(val) {
      this.formList.totalPage = Number(val.totalPage)
      this.formList.totalCount = Number(val.totalCount)
      this.formList.pageSize = Number(val.pageSize)
      this.formList.pageIndex = Number(val.pageIndex)
    },
    // 分页渲染当前页面数据
    currentChange(val) {
      this.formList.pageIndex = val
      this.fetchList()
    },
    changeVisibleFn(row) {
      this.rowInfo = row
      this.changeVisible = true
    },
    closeFn() {
      this.changeVisible = false
    },
    async submit() {
      // console.log(this.formData, '878946654')
      this.$refs.deptRef.validate(async valid => {
        if (!valid) return
        try {
          await changeBlockApi(this.rowInfo)
          this.$message.success('修改成功')
          this.formList = {
            pageIndex: 1,
            pageSize: 10,
            totalCount: 0,
            totalPage: 0

          }
          this.fetchList()
          this.closeFn()
        } catch (err) {
          this.$message.warning(`修改失败,${err.response.data}`)
        // console.dir(err)
        }
      })
    },
    selectionFn(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection, '7777777777')
    },
    toggleSelection(rows) {
      // console.log(rows, '888888888888')
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    async openFn() {
      const res = await policyList()
      this.policyTypeList = res
      console.log(this.policyTypeList, '88888888')
    }

  }
}
</script>
<style lang="scss" scoped>
.el-pagination{
  margin-top: 30px;
}
::v-deep .el-pagination button{
width: 70px;
}
.bottomBox span{
position:absolute;
font-size: 21px;
color: #dbdfe5;
}
::v-deep .el-table th, .el-table tr{
  background: #f3f6fb;
}
*{
  font-size: 18px;
}
</style>
